<template>
  <div class="app-container details repayment-details">
    <el-row :gutter="20">
      <el-col :span="5" class="details-left box-card">
        <el-card>
          <!-- 系统介绍 -->
          <div class="details-left-top details-left-box">
            <!-- 项目才显示图标 -->
            <!-- <i class="el-icon-s-tools"></i> -->
            <div class="top">
              <svg-icon
                :icon-class="'svg_hkgl'"
                class="block w-80px h-80px m-auto mb-15px"
              />
              <label v-if="formData.orderTitle"
                >【{{ formData.orderTitle }}】的回款</label
              >
              <!-- <p>
                <dict-drop
                  :options="repayment_status"
                  :value="formData.status"
                />
              </p> -->
            </div>
          </div>
          <div class="details-left-box">
            <!-- <div class="title">项目资产概况</div> -->
            <div class="cnt">
              <el-row :gutter="24" class="btn-box">
                <el-col :span="20" :offset="2">
                  <el-button
                    class="w-full"
                    type="primary"
                    @click="handleUpdate"
                  >
                    配置回款计划</el-button
                  >
                </el-col>
                <el-col :span="20" :offset="2">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    @click="handleAdd"
                    >添加回款记录</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="details-left-box">
            <el-descriptions
              title="回款信息"
              :column="1"
              border
              :size="'small'"
            >
              <div class="title">回款信息</div>
              <el-descriptions-item label="回款计划" label-class-name="w-3/6"
                >{{ formData.allPeriod }}期</el-descriptions-item
              >
              <el-descriptions-item label="已完成计划"
                >{{ formData.donePlan }}期</el-descriptions-item
              >
              <el-descriptions-item label="已回款金额(元)">{{
                formData.repaymentPrice
              }}</el-descriptions-item>
              <el-descriptions-item label="回款截止日期">{{
                parseTime(formData.repaymentDeadline, '{y}-{m}-{d}')
              }}</el-descriptions-item>
              <el-descriptions-item label="已逾期计划"
                >{{ formData.overduePlan }}期</el-descriptions-item
              >
              <el-descriptions-item label="未回款金额(元)">{{
                formData.unRepaymentPrice
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" class="box-card">
        <el-card class="details-right">
          <el-descriptions title="基本信息" :column="2" border>
            <template #title>
              <TitleName
                title="基本信息"
                icon="i-carbon-bookmark-filled"
              ></TitleName>
            </template>
            <el-descriptions-item
              label="订单名称"
              label-align="right"
              label-class-name="w-40"
              >{{ formData.orderTitle }}</el-descriptions-item
            >
            <el-descriptions-item
              label="订单金额"
              label-align="right"
              label-class-name="w-40"
              >¥{{ formData.orderPrice }}</el-descriptions-item
            >
            <el-descriptions-item label="关联客户" label-align="right">
              <el-link
                v-if="formData.customerType == 'customer'"
                type="primary"
                :underline="false"
                @click="
                  goTo('/customerManage/customerModules/customerDetails', {
                    customerId: formData.customerId
                  })
                "
                >{{ formData.customerName }}</el-link
              ><el-link
                v-else-if="formData.customerType == 'cusLink'"
                type="primary"
                :underline="false"
                @click="
                  goTo('/customerManage/contactsModules/contactsDetails', {
                    contactsId: formData.customerId
                  })
                "
                >{{ formData.customerName }}</el-link
              ></el-descriptions-item
            >
            <el-descriptions-item label="回款金额" label-align="right">
              ¥{{ formData.repaymentPrice }}
            </el-descriptions-item>
            <el-descriptions-item label="回款期次" label-align="right"
              >{{ formData.allPeriod }}期</el-descriptions-item
            >
            <el-descriptions-item label="关联订单" label-align="right">
              <el-link
                type="primary"
                :underline="false"
                @click="
                  goTo('/sales/indent/salesOrderDetails', {
                    salesOrderId: formData.orderId
                  })
                "
                >{{ formData.orderTitle }}</el-link
              ></el-descriptions-item
            >
            <el-descriptions-item label="所属业务板块" label-align="right">
              <dict-drop
                :options="order_business_type"
                :value="formData.businessType"
                :isDrop="false"
            /></el-descriptions-item>
            <el-descriptions-item label="订单归属单位" label-align="right">{{
              formData.deptName
            }}</el-descriptions-item>
            <el-descriptions-item label="订单归属人" label-align="right">{{
              formData.orderBelongUserName
            }}</el-descriptions-item>
            <el-descriptions-item label="订单归属部门" label-align="right">{{
              formData.orderBelongDeptName
            }}</el-descriptions-item>
          </el-descriptions>

          <RepaymentPlan
            class="pt-5"
            :dataList="planData.list"
            :countData="planData.count"
          />
          <RepaymentRecord :tableParam="recordData" />
        </el-card> </el-col
    ></el-row>
  </div>
</template>
<script setup name="RepaymentDetails">
import { reactive, toRefs, ref, createApp, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  getRepaymentDetail,
  getA8Repayment
} from '@/api/repaymentManage/repayment'
import useTagsViewStore from '@/store/modules/tagsView'

import RepaymentPlan from '@/views/financialManage/repaymentManage/modules/repaymentPlan'
import RepaymentRecord from '@/views/financialManage/repaymentManage/modules/repaymentRecord'
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const props = defineProps({
  id: {
    type: String,
    require: false,
    default: null
  }
})
const formData = ref({
  repaymentPlanList: []
})
const {
  order_business_type, //订单业务板块,
  pay_type,
  settle_type
} = proxy.useDict('order_business_type', 'pay_type', 'settle_type')

const data = reactive({
  loading: false,

  planData: {
    list: [],
    count: {}
  },
  recordData: {
    id: '',
    type: 'order'
  }
})
let { loading, planData, recordData } = toRefs(data)

watchEffect(() => {
  if (route.query.salesOrderId) {
    console.log('这是详情！')
    getFormData(route.query.salesOrderId)
    // statusForm.value.name = formData.value.name
  }
})
// watch(
//   () => [formData], //[passData.data, data.crudData],
//   (newVal, oldValue) => {
//     statusForm.value.name = formData.value.name
//   },
//   { deep: true }
// )
/** 获取产品详情
 * @param {number}  id 表单id
 */
function getFormData(id) {
  getRepaymentDetail(id).then(res => {
    let resData = {}
    resData = res.data
    let {
      allPeriod, //总期次
      repaymentProportion, //总回款占比
      orderPrice, //订单总金额
      repaymentPrice, //已回款金额
      unRepaymentPrice, //未回款金额
      overduePrice, //逾期回款金额
      repaymentPlanList, //回款期次
      repaymentList //回款记录
    } = resData

    formData.value = resData
    planData.value.count = {
      orderPrice,
      allPeriod,
      repaymentProportion,
      repaymentPrice
    }
    console.log('repaymentPlanList==>', repaymentPlanList)
    planData.value.list = repaymentPlanList
    // recordData.value.list = repaymentList
  })
  recordData.value.id = id
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 初始化
function init() {
  //   getFormData(route.query.repaymentId)
  //   statusForm.value.name = formData.value.name
}
// 配置回款计划
function handleUpdate() {
  goTo('/financial/repaymentPlanForm', { salesOrderId: formData.value.orderId })
}
//  添加回款记录
function handleAdd() {
  // goTo('/financial/repaymentForm', {
  //   repaymentData: JSON.stringify(formData.value)
  // })
  getA8Repayment(formData.value.orderId).then(() => {
    getFormData(route.query.repaymentPlanId)
    proxy.$modal.msgSuccess('正在获取A8回款信息，请稍后...')
  })
}
// 回款信息详情
function handleDetails(row) {
  goTo('/financial/repaymentPlanDetails', { repaymentPlanId: row.id })
}
// 新增回款记录
function handleRecords(row) {
  goTo('/financial/repaymentForm', {
    repaymentData: JSON.stringify(formData.value)
  })
}

init()
</script>
<style scoped lang="scss">
@import '@/assets/styles/detailsStyle.scss';
:deep(.label-class) {
  width: 130px;
}
</style>
